<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<link rel="stylesheet" type="text/css" href="/css/articles.css">
</head>
<body >
	<% include head %>
	<% include subtitle %>
	<div class="container" style="min-height:100%;">
		<div >
			<% for(var i=0; i< VA.length; i++){%>
				<div class="col-sm-6 col-md-3 " >
					<div class="article-tag-allbody" >
							<a href="/articles/read/<%-VA[i]._id%>" >
								<div style="background-image:url(/article/<%-VA[i].img%>);" class="article-tag-img">
								</div>
							</a>
							<div class="article-tag-title ">
								<a class="article-tag-atitle" href="/articles/read/<%-VA[i]._id%>" ><%-VA[i].name%></a>
								<p class="article-tag-uptime"><span class="glyphicon glyphicon-time"></span><%= (new Date(VA[i].upTime).getFullYear()+"-" +(new Date(VA[i].upTime).getMonth()+1))+"-"+(new Date(VA[i].upTime).getDate())
								%></p>
							</div>
							
					</div>
				</div>
			<%}%>
			<div  style="clear:both;width:100%;text-align: center;">
				<ul class="pagination">
				</ul>
			</div>
		</div>
	</div>
	<% include foot %>
<script>

	var img_height = ($('.article-tag-img').width() )*10/16;
	$('.article-tag-img').css('height',img_height);

	window.onresize=function(){
	img_height = ($('.article-tag-img').width() )*10/16;
	$('.article-tag-img').css('height',img_height);
	}

	fontpage();

	function fontpage(){
		if($(".pagination").length>0){  
        var pagecount = '<%- count %>';  
        var pagesize = 16;  
        var currentpage = parseInt( '<%- page %>');  
        var counts,pagehtml="";  
        if(pagecount%pagesize==0){  
            counts = parseInt(pagecount/pagesize);  
        }else{  
            counts = parseInt(pagecount/pagesize)+1;  
        }  
 
        if(pagecount<=pagesize){pagehtml="";}  
        
        if(pagecount>pagesize){  
            if(currentpage>1){  
                pagehtml+= '<li><a href="/articles/<%-tag%>?page='+(currentpage-1)+'">«</a></li>';  
            }  
            for(var i=0;i<counts;i++){  
                if(i>=(currentpage-3) && i<(currentpage+3)){  
                    if(i==currentpage-1){  
                        pagehtml+= '<li class="active"><a href="/articles/<%-tag%>?page='+(i+1)+'">'+(i+1)+'</a></li>';  
                    }else{  
                        pagehtml+= '<li><a href="/articles/<%-tag%>?page='+(i+1)+'">'+(i+1)+'</a></li>';  
                    }  
                      
                }  
            }  
            if(currentpage<counts){  
                pagehtml+= '<li><a href="/articles/<%-tag%>?page='+(currentpage+1)+'">»</a></li>';  
            }  
        }  
        $(".pagination").html(pagehtml);  
    }  
	}
	
</script>
</body>
</html>